<template>
    <div class="home">
        <div class="main">
            <!--banner 轮播-->
            <div class="swiper-wrapper">
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(item, index) in images" :key="index">
                        <div class="swipe-item-content" @click="handleClickSwipe(item)">
                            <img v-lazy="item.imgUrl" class="swiper-img"/>
                            <div class="text" v-if="item.introduce">
                                <p>{{item.introduce}}</p>
                            </div>
                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!--活动分类-->
            <div class="category-wrapper">
                <van-row :gutter="20">
                    <van-col span="6">
                        <div class="category-item">
                            <img v-lazy="require('../assets/newShop.png')" class="category-img" alt="新品上架">
                            <p class="category-title">新品上架</p>
                        </div>
                    </van-col>
                    <van-col span="6">
                        <div class="category-item">
                            <img v-lazy="require('../assets/active.png')" class="category-img" alt="新品上架">
                            <p class="category-title">活动专场</p>
                        </div>
                    </van-col>
                    <van-col span="6">
                        <div class="category-item">
                            <img v-lazy="require('../assets/ticket.png')" class="category-img" alt="新品上架">
                            <p class="category-title">领券中心</p>
                        </div>
                    </van-col>
                    <van-col span="6">
                        <div class="category-item" @click="handleShare">
                            <img v-lazy="require('../assets/share.png')" class="category-img" alt="新品上架">
                            <p class="category-title">分享抽奖</p>
                        </div>
                    </van-col>
                </van-row>
            </div>
            <!--产品分类-->
            <van-cell :border="false" title-class="large-title" title="产品分类" value="查看全部" size="large" replace is-link
                      :to="{name:'shop'}"/>
            <div class="product-categories">
                <van-row :gutter="10">
                    <van-col span="8">
                        <div class="product-item">
                            <p class="product-title">肉禽蛋类</p>
                            <!--<p class="product-subtitle">活动专场</p>-->
                            <img v-lazy="require('../assets/meat.png')" class="product-img" alt="新品上架">
                        </div>
                    </van-col>
                    <van-col span="8">
                        <div class="product-item">
                            <p class="product-title">安心蔬菜</p>
                            <!--<p class="product-subtitle">活动专场</p>-->
                            <img v-lazy="require('../assets/vegetables.png')" class="product-img" alt="新品上架">

                        </div>
                    </van-col>
                    <van-col span="8">
                        <div class="product-item">
                            <p class="product-title">水产海鲜</p>
                            <!--<p class="product-subtitle">活动专场</p>-->
                            <img v-lazy="require('../assets/seafood.png')" class="product-img" alt="新品上架">
                        </div>
                    </van-col>
                </van-row>

            </div>


            <!--新品上架-->
            <van-cell :border="false" title-class="large-title" size="large">
                <template #title>
                    <span class="custom-title">新品上架</span>
                    <img v-lazy="require('../assets/new-icon.png')" alt="新品上架" class="new-shop-icon">
                </template>
            </van-cell>
            <div class="new-product">
                <van-row :gutter="10">
                    <van-col span="11">
                        <div class="left-product product-item">
                            <p class="product-title">绿色生态香菇</p>
                            <p class="product-subtitle">限时五折 售完为止</p>
                            <div class="tag discount">
                                <span>限时折扣</span>
                            </div>
                            <div class="product-img">
                                <img v-lazy="require('../assets/xianggu.png')" alt="新品上架">
                            </div>

                        </div>
                    </van-col>
                    <van-col span="13">
                        <van-row :gutter="20">
                            <van-col span="24">
                                <div class="right-product product-item first-item">
                                    <div class="content">
                                        <p class="product-title">冰糖炖雪梨</p>
                                        <p class="product-subtitle">当季好物</p>
                                        <div class="tag new">
                                            <span>新品上市</span>
                                        </div>
                                    </div>
                                    <div class="product-img">
                                        <img v-lazy="require('../assets/fanqie.png')" alt="新品上架">
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="24">
                                <div class="right-product product-item">
                                    <div class="content">
                                        <p class="product-title">无污染香菜</p>
                                        <p class="product-subtitle">吃货有福啦</p>
                                        <div class="tag great">
                                            <span>品质好物</span>
                                        </div>
                                    </div>
                                    <div class="product-img">
                                        <img v-lazy="require('../assets/qincai.png')" alt="新品上架">
                                    </div>
                                </div>
                            </van-col>
                        </van-row>

                    </van-col>
                </van-row>
            </div>
            <van-uploader :after-read="afterRead" />
            <!--推荐好物-->
            <van-cell :border="false" title-class="large-title" title="推荐好物" size="large"/>

            <div class="great-goods">
                <van-row gutter="20">
                    <van-col span="12">
                        <div class="goods-item">

                            <img v-lazy="require('../assets/qincai.png')" alt="新品上架">

                            <div class="content">
                                <p class="goods-title">无污染香菜</p>
                                <div class="">
                                    <span>品质好物</span>
                                </div>
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </div>
        <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
        />
    </div>
</template>


<script>
    import Banner from '../assets/banner.png'
    // import wx from 'weixin-js-sdk'
    import axios from 'axios'

    export default {
        name: 'Home',
        data() {
            return {
                active: 'home',
                show: false,
                value: '',
                loading: false,
                finished: false,
                images: [
                    {
                        imgUrl: Banner,
                        type: 1,
                        introduce: '这是测试banner样式'
                    }, {
                        imgUrl: Banner,
                        type: 1,
                        // introduce: '这是测试banner样式'
                    }, {
                        imgUrl: Banner,
                        type: 1,
                        // introduce: '这是测试banner样式'
                    }, {
                        imgUrl: Banner,
                        type: 1,
                        // introduce: '这是测试banner样式'
                    }
                ],
                showShare: false,
                options: [
                    {name: '微信', icon: 'wechat', type: 'wechart'},
                    {name: '微博', icon: 'weibo', type: 'weibo'},
                    {name: '复制链接', icon: 'link', type: 'copy'},
                    {name: '分享海报', icon: 'poster', type: 'poster'},
                    {name: '二维码', icon: 'qrcode', type: 'qrcode'},
                ],
            }
        },
        methods: {
            handleShare() {
                this.showShare = true
            },
            onSelect(option) {
                let type = option.type;
                switch (type) {
                    case 'wechart':

                        wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                            wx.updateAppMessageShareData({
                                title: '1234', // 分享标题
                                desc: '1234', // 分享描述
                                link: '1234', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: '1234', // 分享图标
                                success: function () {
                                    // 设置成功
                                },
                                fail(res) {
                                    console.error(res)
                                }
                            })
                        });
                        console.log('wechart')

                        break;
                    case 'weibo':
                        break;
                    case 'copy':
                        break;
                    case 'poster':
                        break;
                    case 'qrcode':
                        break;
                }
                console.log(option)
            },
            //点击swipe
            handleClickSwipe(item) {
                console.log(item)
            },
            onLoad() {
            },
            changePic() {
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        console.log(res)
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    }
                });


            }
        },
       async mounted() {
           try {
               let url = window.location.href.split('#')[0]
               let {data} = await axios.get(`http://justtodu.cn/auth/getSignature?url=${encodeURIComponent(url)}`);
               let configData = data.data
               console.log('configData',configData)
               wx.config({
                   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                   appId: configData.appId, // 必填，公众号的唯一标识
                   timestamp: configData.timestamp, // 必填，生成签名的时间戳
                   nonceStr: configData.noncestr, // 必填，生成签名的随机串
                   signature: configData.signature,// 必填，签名
                   jsApiList: ['checkJsApi','chooseImage'] // 必填，需要使用的JS接口列表
               });
               wx.error((e)=>{
                    console.error(e)
               })
               // wx.ready(()=>{
               //     wx.checkJsApi({
               //         jsApiList:['chooseImage'],
               //         success(res){
               //             console.log('checkJsApi',res)
               //         }
               //     })
               // })
           }catch (e) {
               console.log(e)
           }

            // wx.ready(()=>{
            //     alert(1)
            // })
            //
            // wx.ready(async () => {
            //
            //     console.log(data)
            //     // wx.checkJsApi({
            //     //     jsApiList: [
            //     //         'getNetworkType',
            //     //         'previewImage'
            //     //     ],
            //     //     success: function (res) {
            //     //         alert(JSON.stringify(res));
            //     //     },
            //     //     fail(res) {
            //     //         console.error(res)
            //     //     }
            //     // });
            //
            //     // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            // });
            //
            // wx.error(function (res) {
            //     console.log(res)
            //     // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            // });
            // wx.config({
            //     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //     appId: '', // 必填，公众号的唯一标识
            //     timestamp: , // 必填，生成签名的时间戳
            //     nonceStr: '', // 必填，生成签名的随机串
            //     signature: '',// 必填，签名
            //     jsApiList: [] // 必填，需要使用的JS接口列表
            // });
        }
    }
</script>
<style lang="scss" scoped>
    .main {
        p {
            margin: 0;
            line-height: 1;
        }
        .swiper-wrapper {
            .swipe-item-content {
                height: 282px;
                position: relative;
            }
            .swiper-img {
                width: 100%;
            }
            .text {
                position: absolute;
                left: 0;
                width: 100%;
                bottom: 0;
                height: 40px;
                background-color: rgba(0, 0, 0, 0.2);
                display: flex;
                align-items: center;
                z-index: 0;
                p {
                    padding: 0 32px;
                    color: #fff;
                    font-size: 14px;
                }
            }
            ::v-deep .van-swipe__indicators {
                z-index: 99;
                .van-swipe__indicator {
                    width: 20px;
                    height: 8px;
                    border-radius: 4px;
                }
            }

        }
        .category-wrapper {
            padding: 32px 0;
            .category-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: column;
                .category-title {
                    margin: 0;
                    margin-top: 10px;
                    font-size: 14px;
                    color: #333333;
                }
                .category-img {
                    width: 84px;
                    height: 84px;
                    display: block;
                    padding: 10px;
                }

            }
        }

        .product-categories {
            padding: 0 32px;
            .product-item {
                padding: 30px 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: #F5F7FA;
                border-radius: 8px;
                .product-title {
                    font-size: 14px;
                    font-weight: bold;
                    color: #333333;
                    margin-bottom: 20px;
                }
                /*.product-subtitle {*/
                /*font-size: 12px;*/
                /*color: #A4A4A4;*/
                /*margin: 10px 0 20px 0;*/
                /*}*/
                .product-img {
                    height: 110px;
                }
            }

        }

        .new-product {
            padding: 0 32px;
            .product-item {
                background-color: #F5F7FA;
                border-radius: 8px;
                .product-title {
                    font-size: 16px;
                    font-weight: bold;

                    color: #333333
                }
                .product-subtitle {
                    font-size: 12px;
                    color: #a4a4a4;
                    margin: 10px 0 20px 0;
                }
                .tag {
                    display: flex;
                    align-items: center;
                    height: 44px;
                    line-height: 44px;
                    font-size: 12px;
                    color: #ffffff;
                    span {
                        padding: 0 10px;
                    }
                    &.discount span {
                        background-color: #F58F19;
                    }
                    &.new span {
                        background-color: #3E9CFA;
                    }
                    &.great span {
                        background-color: #18C7A1;
                    }
                }
            }

            .left-product {
                height: 380px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 40px 40px 30px 40px;
                .product-img {
                    height: 150px;
                    img {
                        height: 150px;
                    }
                }
            }
            .right-product {
                display: flex;
                height: 180px;
                &.first-item {
                    margin-bottom: 20px;
                }
                .content {
                    padding: 24px 0 0 30px;
                    flex: 1;
                }
                .product-img {
                    width: 150px;
                    margin-left: 20px;
                    display: flex;
                    align-items: center;
                    img {
                        width: 150px;
                    }
                }
            }
        }

        .large-title {
            font-size: 18px;
            font-weight: bold;
        }
        .new-shop-icon {
            width: 50px;
            height: 30px;
            margin-left: 10px;
        }
    }
</style>
